<template>
  <div class="w-full h-full">
    <mapBase2D></mapBase2D>
    <div class="rightPlane">
      <h3>
        <SvgIcon name="wmc-plane" width="28" height="28" color="#1E55CC"></SvgIcon>无人机架次
      </h3>
      <div class="airTab">
        <div :class="activeTab === 0 ? 'airTab-item active' : 'airTab-item'" @click="changeTab(0)">实时轨迹</div>
        <div :class="activeTab === 1 ? 'airTab-item active' : 'airTab-item'" @click="changeTab(1)">轨迹回放</div>
      </div>
      <div class="airList">
        <el-checkbox-group v-model="checkFlightList">
          <el-checkbox v-for="item in flightList" :key="item.id" :value="item.id" class="airList-item"
            @click="planeChange(item)">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getAssets } from "@/utils/index.ts";
import { MapManager } from "@/components/cme-base2D/core/MapManager.ts";
import { onMounted, ref, watch } from "vue";
import RightPlane from './comp/rightPlane.vue'
import mapStore from "@/stores/modules/map.ts";

const mapStores = mapStore()
const olService = MapManager.getInstance()
const checkFlightList = ref([])
const flightList = ref([
  { id: 'B3765_20241114_01', name: 'B3765_20241114_01' },
  { id: 'B12PW_20241114_02', name: 'B12PW_20241114_02' },
])

onMounted(() => {
  mapStores.pushMapType('layer')
})

watch(() => mapStores.timelineParameters, (newVal) => {
  olService.playBackMove(newVal.time)
})

// 实时轨迹与历史轨迹切换
const activeTab = ref(0)
const changeTab = (value) => {
  activeTab.value = value

}

// 获取航班架次列表
const getFightsData = () => {

}

// 架次切换
const planeChange = (item) => {
  // 判断是选中还是取消
  if (checkFlightList.value.includes(item.id)) {
    // 取消 重置时间轴起始时间 清除航线标记
    delFightTimeLine(item.id)
    olService.clearPlayback(item.id)
  } else {
    // 选中
    getPlanData(item.id)
  }
}

// 获取架次详情 初始化轨迹回放
const getPlanData = (fightId) => {
  let OlCzmlConfig = {
    id: 'document',  // czml标识 / 数据标识
    clock: {
      interval: '',  // 时间区间 "开始时间戳/结束时间戳"
      currentTime: '', //  当前时间 时间戳
      multiplier: 1, // 播放 速度  默认为1
      loopPlayback: 1 // 0循环 1 不循环
    },
    data: []
  }
  let ModelConfig = {
    id: '',
    name: '',
    epoch: 0,// 起始时间
    model: {
      img: '',  // 图片路径
      scale: 0.8,
      type: 'png'
    },
    position: {
      heading: [], // 水平角信息 [0.2,0.1.....],
      coordinate: [], // 坐标信息  [[0,0],[1,1]]
      time: [], // 时间信息 [0,1,2,3,4,5]
      information: []  // 其他信息 [[{id:123,name:456}]]
    }
  }

  olService.getAnalysisCSV(getAssets('data/csv/' + fightId + '.csv')).then(res => {
    let heading = [];   //  水平角数据
    let coordinates = [];  // 坐标
    let information = []; // 其他信息
    let time = []; // 时间
    res.forEach(item => {
      coordinates.push([item[4], item[5]]) //  坐标
      time.push(new Date(item[2] + " " + item[3]).getTime())  // 时间
    })
    // 组结构数据
    OlCzmlConfig.clock.interval = `${time[0]}/${time[time.length - 1]}`
    OlCzmlConfig.clock.currentTime = time[0]
    ModelConfig.id = fightId
    ModelConfig.epoch = time[0]
    ModelConfig.name = fightId
    ModelConfig.model.img = getAssets('images/model/feiji.png')
    ModelConfig.position.coordinate = coordinates
    ModelConfig.position.time = time
    OlCzmlConfig.data.push(ModelConfig)
    // mapStores.setCurIsPlay(true)
    // 多段架次时 设置时间轴起始时间
    addFightTimeLine(fightId, time[0], time[time.length - 1])
    // console.log(OlCzmlConfig);
    olService.initializePlayback(OlCzmlConfig)

  })
}

// 用于记录时间轴起始时间
const timeOption = {
  startTime: Number.MAX_VALUE,
  endTime: 0
}
// 所有架次的起始时间
const fightTimeList = []
// 添加架次 计算时间轴起始时间
const addFightTimeLine = (id, startTime, endTime) => {
  // 记录所有架次起始时间信息 后续删除时用作比对
  fightTimeList.push({
    id,
    startTime,
    endTime
  })
  timeOption.startTime = Math.min(startTime, timeOption.startTime)
  timeOption.endTime = Math.max(endTime, timeOption.endTime)
  mapStores.setTime(timeOption)
}
// 设置时间轴起始时间
const delFightTimeLine = (id) => {
  const startArr = []
  const endArr = []
  let delIndex;
  fightTimeList.map((item, index) => {
    if (item.id === id) {
      delIndex = index
    } else {
      startArr.push(item.startTime)
      endArr.push(item.endTime)
    }
  })
  // 删除对应架次
  if (delIndex || delIndex === 0) {
    fightTimeList.splice(delIndex, 1)
  }
  // 未选中任何航班 时间轴归零
  if (fightTimeList.length === 0) {
    timeOption.startTime = Number.MAX_VALUE
    timeOption.endTime = 0
    mapStores.setTime({
        startTime: 0,
        // endTime: 0
    })
    mapStores.setCurIsPlay(false)
    return
  }
  // 删除航班后，取现有航班中的起始时间最小值和最大值
  timeOption.startTime = Math.min(...startArr)
  timeOption.endTime = Math.max(...endArr)
  mapStores.setTime(timeOption)
}

</script>

<style lang="scss" scoped>
.rightPlane {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: calc(100% - 30px);
  background: #F1F5FF;
  opacity: 0.9;

  h3 {
    display: flex;
    align-items: center;
    margin: 0;
    // padding-left: 6px;
    height: 30px;
    font-size: 16px;
    color: #4B4B4B;
    background: linear-gradient(to right, rgba(67, 126, 241, 0.3), rgba(67, 126, 241, 0.1));

    svg {
      margin: 0 4px 0 6px;
    }
  }

  .airTab {
    display: flex;

    &-item {
      flex: 1;
      padding: 5px 10px;
      color: #606266;
      text-align: center;
      background: rgba(67, 126, 241, 0.1);

      &:hover,
      &.active {
        font-weight: 700;
        color: #409eef;
        background: #F1F5FF;
        cursor: pointer;
      }
    }
  }

  .airList {
    width: 100%;
    height: 30%;
    padding: 10px;
    font-size: 14px;
    overflow: hidden;

    &-item {
      width: 100%;
      color: #606266;
      background: linear-gradient(to right, rgba(67, 126, 241, 0.3), rgba(67, 126, 241, 0.1));
      padding: 4px;
      border-radius: 4px;
      margin-bottom: 10px;
      cursor: pointer;

      &:hover,
      &.active {
        color: #409eef;
      }
    }
  }
}
</style>